<template>
    <div class="circular-menu-container">
        <!-- 中心按钮 -->
        <div class="center-button" :class="{ 'expanded': isExpanded }" @click="toggleMenu">
            <div class="default-icon">+</div>
        </div>

        <!-- 菜单项 -->
        <transition-group name="circular-item" tag="div" :duration="300">
            <div v-for="(item, index) in menuItems" v-show="isExpanded" :key="item.id" class="menu-item"
                :style="getItemPosition(index)" @click="handleItemClick(item)">
                <div class="item-content" :class="{ 'active': activeItem === item.id }">
                    <div class="item-icon" :style="{ color: item.color }">
                        <img v-if="item.icon" :src="item.icon" class="icon-image" :title="item.label">
                        <span v-else>{{ item.label?.slice(0, 1) }}</span>
                    </div>
                    <!-- <span v-if="showLabels" class="item-label">{{ item.label }}</span> -->
                </div>
            </div>
        </transition-group>
    </div>
</template>

<script setup lang="ts">
import { ref, PropType } from 'vue'

const emits = defineEmits(['camelia-son-com-click']);

interface MenuItem {
    id: string | number
    label: string
    icon?: string
    color?: string
    url?: string
    value?: string
}
// 通过props来实现环形菜单
const props = defineProps({
    menuItems: {
        type: Array as PropType<MenuItem[]>,
        required: true
    }
})

console.log(`收到的props:`, props.menuItems);

// 组件配置参数
// const radius = 100 // 修改半径值以调整距离
// const startAngle = -90 // 起始角度

const isExpanded = ref<boolean>(false)
const activeItem = ref<string | number | null>(null)

// 位置计算
const centerButtonX = 50; // 假设中心按钮的宽度为 50px
const centerButtonY = 50; // 假设中心按钮的高度为 50px

const getItemPosition = (index: number) => {
    const angle = 90 - (index * 180) / (props.menuItems.length - 1); // 角度范围从 90 到 -90
    const radians = (angle * Math.PI) / 180;
    const radius = 100; // 圆的半径

    // 计算菜单项的中心点位置
    const centerX = centerButtonX + (Math.cos(radians) * radius);
    const centerY = centerButtonY + (Math.sin(radians) * radius);

    return {
        top: `${centerY}px`, // 图标和文字的垂直位置
        left: `${centerX}px`, // 图标和文字的水平位置
        transform: `rotate(${-angle}deg) translate(-50%, -50%)` // 旋转并居中对齐
    };
}

// 菜单切换
const toggleMenu = () => {
    isExpanded.value = !isExpanded.value
    console.log(`isExpanded:`, isExpanded.value); // 检查是否正确切换
    if (!isExpanded.value) activeItem.value = null
}

// 点击处理
const handleItemClick = (item: MenuItem) => {
    activeItem.value = item.id
    emits('camelia-son-com-click', item.url)
}
</script>
<style scoped lang="scss">
@import url("./annular.scss");
</style>